/**
* @file 搜索组件
* @author renzhiqiang
* @date 2017-01-20
*/
<template>
  <div id='selectTab'>
    <div class="select_tab":style="{marginTop: configure.top + 'px !important' }">
      <a v-for="item in configure.ele" @tap="showSelect($index)" :class="{selected: item.selected}">{{item.value}}
        <span :class="{'crm-solid-up-triangle':item.selected,'crm-solid-lower-triangle':!item.selected}"
              class="mui-icon"></span>
        <span v-if="$index<(configure.ele.length-1)" class="right"></span>
      </a>
    </div>
    <div class="crm_search" :style="selectCss" v-show="selectShow">
      <div class="">
        <div class="">
          <a v-for="item in selectData" @tap="selectFn($index)"
             :class="{'selected': item.selected, 'crm-check': item.selected}"
             class="mui-icon">{{item.itemName}}<span></span></a>
        </div>
      </div>
      <!--<div class="background_select" @tap="cleanSelect()"  :style="backCss"></div>-->
    </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import 'search.css';
</style>
<script>
  export default{
    data () {
      return {
        selectShow: false, // 是否展示下拉框是否展示默认不展示
        selectData: [] //下拉框数据
      };
    },
    props: {
      configure: {} //组件配置属性
    },
    methods: {
      selectFn(evt) { //头部左右两侧点击事件 回调函数
        var idx = 0;
        this.selectShow = false; // 关掉下拉框
        this.configure.ele.forEach(function (value,index) { //遍历需找点击源的搜索栏的位
            if(value.selected == true){
              idx = index;
            }
            value.selected = false;
        });
        this.configure.ele[idx].opt.map((value,idx) => { // 下拉框选择样式切换
          if(idx == evt){
            value.selected = !value.selected ;
          }else {
            value.selected = false ;
          };
        });
        if(typeof this.configure.ele[idx].fn === 'function' ){ //点击回调函数,执行对应业务
          this.configure.ele[idx].fn.bind(this)(this.configure.ele[idx].opt[evt].itemCode);
        }
      },
      showSelect: function (index) { // 搜索框的点击样式切换处理动作
        var self = this;
        this.selectData= self.configure.ele[index].opt;
        self.selectShow = false;
        this.configure.ele.map((value,idx) =>{
          if(idx == index){
            value.selected = !value.selected ;
          }else {
            value.selected = false ;
          };
          if(value.selected){
            self.selectShow = true;
          };
          return value ;
        });
        console.info(this.configure.ele);
      },
      select: function (evt) { //头部下拉框点击事件 回调函数
        this.isOpen =! this.isOpen
        if(typeof this.configure.select.ele[evt].fn === 'function' ){
          this.configure.select.ele[evt].fn.bind(this)(evt);
        }
      }
    },
    created:function () {
    },
    ready: function () {
      var self = this;
      this.configure.ele=this.configure.ele.map(value =>{ // 第一层添加一个默认属性select;
         value.opt=value.opt.map((val,index) => { // 配置添加第二层添加一个默认属性select;
           var vals = {}
           if(index == 0){  //默认第一个自动选择
             vals = Object.assign({},val,{selected : true});
           }else {
             vals = Object.assign({},val,{selected : false});
           }
          return vals;
         });
        return Object.assign({},value,{selected : false});
      });
    }
  }
</script>
